<template>
	<uni-nav-bar statusBar @clickLeft="back" @clickRight="toRecord" :shadow="false" :border="false" fixed
		left-icon="left" rightText="提现记录" title="我要提现" color="#ffffff" backgroundColor="#3c9cff" shadow />
	<view class="withdrawal-container">
		<view class="base-info flex flex-direction align-center">
			<image src="/static/logo.png" mode="widthFix"></image>
		</view>
		<view class="form-wrap">
			<uni-forms ref="form" :modelValue="formData" validate-trigger="blur" label-position="top" label-width="100%" :rules="rules" err-show-type="toast">
				<uni-forms-item label="用户钱包地址" class="fbox" name="payeeInfo">
					<uni-easyinput type="text" v-model="formData.payeeInfo" trim="all" clearSize="36rpx" :inputBorder="false" :clearSize="20" placeholder="请输入用户钱包地址" />
					<uni-icons custom-prefix="iconfont" type="icon-yonghu" color="#999" size="18"></uni-icons>
				</uni-forms-item>
				<!-- <view class="line">或</view>
				<view class="scan" @click="$modal.building()">
					<uni-icons custom-prefix="iconfont" type="icon-saoma" color="#2979ff" size="18"></uni-icons>
					<text>扫描商户二维码</text>
				</view> -->
				<uni-forms-item label="提现金额" class="fbox" name="amount">
					<uni-easyinput type="digit" v-model="formData.amount" trim="all" clearSize="36rpx" :inputBorder="false" :clearSize="20" placeholder="请输入提现金额" />
					<view class="unit">{{ currencyUnit }}</view>
				</uni-forms-item>
				<view class="total">
					<view class="num">
						手续费：<up-text mode="price" :text="withdrawalFee"></up-text>，可提金额：<view><up-text mode="price" :text="balance"></up-text><text>{{ currencyUnit }}</text></view>
					</view>
					<up-text text="全部" @click="formData.amount = balance" type="primary" :size="14"></up-text>
				</view>
				<up-text class="tip" prefixIcon="error-circle" text="温馨提示：为保障您的资金安全，请确认提现钱包地址，资金一旦转出，本平台概不负责。" type="info" :size="13"></up-text>
			</uni-forms>
		</view>
		
		<view class="btn-group">
			<up-button @click="submit"  color="linear-gradient(to right, rgb(0, 85, 255), rgb(0, 170, 255))" hairline shape="circle" text="确认"></up-button>
		</view>
	</view>
	
	<geek-code ref="code" v-model:code="code" @success="onConfirm"></geek-code>
</template>

<script>
	import _ from 'lodash'
	import { info,withdrawal } from '@/api/seller/account.js'
	export default {
		data() {
			const self = this
			return {
				accountId:'',
				balance: 0,
				// 谷歌验证码
				code:'',
				// 表单数据
				formData: {
					payeeInfo: '',
					amount:null
				},
				rules: {
					// 对name字段进行必填验证
					payeeInfo: {
						rules: [{
								required: true,
								errorMessage: '请输入提现钱包地址',
							}
						]
					},
					amount: {
						rules: [{
								required: true,
								errorMessage: '请输入提现金额',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if ((Number(value) + self.withdrawalFee) > Number(self.balance)) {
										callback('提现金额+手续费('+self.withdrawalFee+')，不能大于可提金额')
										return false
									}
									
									return true
								}
							}
						]
					}
				}
			}	
		},
		computed:{
			walletList(){
				const lists = this.$store.state.user?.wallets || []
				return _.map(lists,vo => {
					return {
						...vo,
						text:vo.walletName,
						value:vo.walletAddr
					}
				})
			},
			accountInfo(){
				return this.$store.state.user?.account || {}
			},
			myAccountId(){
				return this.accountInfo?.id || ''
			},
			appInfo() {
				return this.$store.state.user?.appInfo || {}
			},
			
			currency(){
				return this.appInfo.currency || ''
			},
			currencyUnit(){
				return this.appInfo.settleCurrencyUnit || ''
			},
			currencyRate(){
				return this.appInfo.settleCurrencyRate || ''
			},
			withdrawalFee(){
				return this.appInfo.withdrawalFee || '1.0'
			},
			args(){
				return {
					...this.formData,
					accountId:this.accountId
				}
			}
		},
		
		methods: {
			// 触发提交表单
			submit() {
				const self = this
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					self.$refs.code.open()
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			
			back() {
				this.$tab.navigateBack()
			},
			
			toRecord() {
				this.$tab.navigateTo('/pages_mine/pages/withdrawal/detail')
			},
			
			onConfirm(){
				const self = this
				if(!this.code){
					return false
				}
				withdrawal(this.args,this.code).then(({data}) => {
					// this.$modal.msgSuccess('充值成功')
					uni.showModal({
					  title: '系统提示',
					  content: '提现申请已提交，请等待后台审核打款',
					  showCancel:false,
					  cancelText: '退出提现',
					  confirmText: '知道了',
					  success: function (res) {
						self.$tab.navigateBack()
					  }
					})
				})
			},
		},
		
		onLoad(options){
			this.accountId = options?.id || this.myAccountId
			info("FUND").then(res=>{
				this.balance = res.data.balance / 100;
			})
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawal-container {
		
		.base-info {
			padding: 40rpx 20rpx 100rpx;
			background-color: #3c9cff;
			color: #fff;
			height: 300rpx;
			
			image{
				width: 150rpx;
				height: 150rpx;
			}
		}
		
		.form-wrap{
			background-color: #fff;
			margin: -60rpx 40rpx 20rpx;
			border-radius: 18rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx #a2a2a2;
			padding: 40rpx;
			
			.line{
				display: flex;
				align-items: center;
				justify-content: center;
				color:#222;
				padding: 16rpx;
				position: relative;
				&::before,&::after{
					content:"";
					display: block;
					height: 1px;
					background-color: #e2e2e2;
					flex:1;
				}
				
				&::before{
					margin-right: 30rpx;
				}
				
				&::after{
					margin-left: 30rpx;
				}
			}
			
			.scan{
				display: flex;
				align-items: center;
				justify-content: center;
				color:#2979ff;
				
				&>text{
					margin-left: 10rpx;
				}
			}
			
			.downlist{
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
				border:none;
				background: none;
				margin-right: 20rpx;
				
				&::v-deep{
					.uni-select{
						border:none !important;
						padding-left: 0;
						
						.uni-select__input-placeholder{
							color: gray;
							font-size: 14px;
						}
						
						.uniui-clear{
							font-size: 36rpx !important;
						}
						
						.uniui-top,.uniui-bottom{
							display: none !important;
						}
					}
				}
			}
			
			&::v-deep{
				.uni-forms-item__label{
					font-size: 30rpx;
					font-weight: 600;
					color:#000;
				}
				
				.uni-forms-item{
					margin-bottom: 20rpx;
					.uni-input-placeholder{
						font-size: 28rpx;
						color:#999;
					}
					
					.uni-input-input{
						color:#333;
					}
					&.fbox{
						.uni-forms-item__content{
							display: flex;
							align-items: center;
							// border-bottom: 1px solid #f2f2f2;
						}
						
						.unit{
							font-size: 24rpx;
							color:#3c9cff;
						}
					}
				}
			}
			
			.total{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-bottom: 30rpx;
				
				.num{
					flex: 1;
					overflow: hidden;
					display: flex;
					align-items: center;
					&>view{
						display: flex;
						align-items: center;
						
						&>text{
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
					
					&::v-deep{
						.u-text__price{
							display:none !important;
						}
						.u-text__value{
							color:#ff0000 !important;
							font-size:36rpx !important;
							font-weight:bold !important;
						}
					}
				}
				
				&::v-deep{
					.u-text{
						flex:none;
						width: auto;
					}
				}
			}
			
			.tip{
				line-height: 40rpx;
				text-align: justify;
				background-color: #f8f8f9;
				padding: 16rpx;
				border-radius: 8rpx;
				align-items: flex-start;
				
				&::v-deep{
					.u-text__prefix-icon{
						margin-right: 10rpx;
						margin-top: 4rpx;
					}
				}
			}
		}
		
		.btn-group{
			padding: 60rpx 40rpx;
			margin-top: 20rpx;
		}
	}
</style>